:root {
  --background: oklch(0.98 0.005 85);
  --foreground: oklch(0.15 0.02 85);
  --card: oklch(1.0 0 0);
  --card-foreground: oklch(0.15 0.02 85);
  --popover: oklch(1.0 0 0);
  --popover-foreground: oklch(0.15 0.02 85);
  --primary: oklch(0.65 0.15 35);
  --primary-foreground: oklch(0.98 0.005 85);
  --secondary: oklch(0.75 0.08 25);
  --secondary-foreground: oklch(0.15 0.02 85);
  --muted: oklch(0.96 0.01 85);
  --muted-foreground: oklch(0.45 0.02 85);
  --accent: oklch(0.85 0.05 50);
  --accent-foreground: oklch(0.15 0.02 85);
  --destructive: oklch(0.55 0.15 15);
  --destructive-foreground: oklch(0.98 0.005 85);
  --border: oklch(0.92 0.01 85);
  --input: oklch(0.96 0.01 85);
  --ring: oklch(0.65 0.15 35);
  --chart-1: oklch(0.65 0.15 35);
  --chart-2: oklch(0.75 0.08 25);
  --chart-3: oklch(0.85 0.05 50);
  --chart-4: oklch(0.55 0.12 60);
  --chart-5: oklch(0.45 0.08 80);
  --sidebar: oklch(0.98 0.005 85);
  --sidebar-foreground: oklch(0.15 0.02 85);
  --sidebar-primary: oklch(0.65 0.15 35);
  --sidebar-primary-foreground: oklch(0.98 0.005 85);
  --sidebar-accent: oklch(0.85 0.05 50);
  --sidebar-accent-foreground: oklch(0.15 0.02 85);
  --sidebar-border: oklch(0.92 0.01 85);
  --sidebar-ring: oklch(0.65 0.15 35);
  --font-sans: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Monaco, Menlo, monospace;
  --radius: 1rem;
  --shadow-2xs: 0 1px 2px 0 hsl(0 0% 0% / 0.05);
  --shadow-xs: 0 1px 3px 0 hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
  --shadow-sm: 0 1px 3px 0 hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
  --shadow: 0 4px 6px -1px hsl(0 0% 0% / 0.1), 0 2px 4px -2px hsl(0 0% 0% / 0.1);
  --shadow-md: 0 4px 6px -1px hsl(0 0% 0% / 0.1), 0 2px 4px -2px hsl(0 0% 0% / 0.1);
  --shadow-lg: 0 10px 15px -3px hsl(0 0% 0% / 0.1), 0 4px 6px -4px hsl(0 0% 0% / 0.1);
  --shadow-xl: 0 20px 25px -5px hsl(0 0% 0% / 0.1), 0 8px 10px -6px hsl(0 0% 0% / 0.1);
  --shadow-2xl: 0 25px 50px -12px hsl(0 0% 0% / 0.25);
  --tracking-normal: 0em;
  --spacing: 0.25rem;
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  
  /* Beauty App Specific Colors */
  --gradient-primary: linear-gradient(135deg, oklch(0.75 0.12 25), oklch(0.65 0.15 35));
  --gradient-secondary: linear-gradient(135deg, oklch(0.85 0.05 50), oklch(0.75 0.08 25));
  --gradient-accent: linear-gradient(135deg, oklch(0.95 0.02 85), oklch(0.85 0.05 50));
  
  /* Tab specific colors */
  --tab-active: var(--gradient-primary);
  --tab-inactive: oklch(0.92 0.01 85);
  --tab-text-active: oklch(0.98 0.005 85);
  --tab-text-inactive: oklch(0.45 0.02 85);
  
  /* Carousel specific colors */
  --carousel-shadow: 0 8px 32px 0 hsl(0 0% 0% / 0.12);
  --carousel-border: oklch(0.95 0.01 85);
}

/* Base styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-sans) !important;
  background-color: var(--background) !important;
  color: var(--foreground) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Utility classes */
.gradient-primary {
  background: var(--gradient-primary);
}

.gradient-secondary {
  background: var(--gradient-secondary);
}

.gradient-accent {
  background: var(--gradient-accent);
}

.shadow-beauty {
  box-shadow: var(--carousel-shadow);
}

.text-primary {
  color: var(--primary);
}

.text-secondary {
  color: var(--secondary);
}

.text-muted {
  color: var(--muted-foreground);
}

.border-beauty {
  border: 1px solid var(--carousel-border);
}

.rounded-beauty {
  border-radius: var(--radius);
}

.rounded-beauty-sm {
  border-radius: var(--radius-sm);
}

.rounded-beauty-lg {
  border-radius: var(--radius-lg);
}